<%-- 
    Document   : gallery
    Created on : Jun 7, 2012, 5:42:13 PM
    Author     : Tyo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../lib/jquery.ad-gallery.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.ad-gallery.js"></script>
        <script type="text/javascript">
            $(function() {
                $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
                $('img.image1').data('ad-title', 'Title through $.data');
                $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
                $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
                var galleries = $('.ad-gallery').adGallery();
                setTimeout(function() {
                    galleries[0].addImage("images/thumbs/t7.jpg", "images/7.jpg");
                }, 1000);
                setTimeout(function() {
                    galleries[0].addImage("images/thumbs/t8.jpg", "images/8.jpg");
                }, 2000);
                setTimeout(function() {
                    galleries[0].addImage("images/thumbs/t9.jpg", "images/9.jpg");
                }, 3000);
                setTimeout(function() {
                    galleries[0].removeImage(1);
                }, 4000);

                $('#switch-effect').change(
                function() {
                    galleries[0].settings.effect = $(this).val();
                    return false;
                }
            );
                $('#toggle-slideshow').click(
                function() {
                    galleries[0].slideshow.toggle();
                    return false;
                }
            );
                $('#toggle-description').click(
                function() {
                    if(!galleries[0].settings.description_wrapper) {
                        galleries[0].settings.description_wrapper = $('#descriptions');
                    } else {
                        galleries[0].settings.description_wrapper = false;
                    }
                    return false;
                }
            );
            });
        </script>

        <style type="text/css">
            * {
                font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
                color: #333;
                line-height: 140%;
            }
            select, input, textarea {
                font-size: 1em;
            }
            body {
                padding: 30px;
                font-size: 70%;
                width: 800px;
            }
            h2 {
                margin-top: 1.2em;
                margin-bottom: 0;
                padding: 0;
                border-bottom: 1px dotted #dedede;
            }
            h3 {
                margin-top: 1.2em;
                margin-bottom: 0;
                padding: 0;
            }
            .example {
                border: 1px solid #CCC;
                background: #f2f2f2;
                padding: 10px;
            }
            ul {
                list-style-image:url(list-style.gif);
            }
            pre {
                font-family: "Lucida Console", "Courier New", Verdana;
                border: 1px solid #CCC;
                background: #f2f2f2;
                padding: 10px;
            }
            code {
                font-family: "Lucida Console", "Courier New", Verdana;
                margin: 0;
                padding: 0;
            }

            #gallery {
                padding: 30px;
                background: #e1eef5;
            }
            #descriptions {
                position: relative;
                height: 50px;
                background: #EEE;
                margin-top: 10px;
                width: 640px;
                padding: 10px;
                overflow: hidden;
            }
            #descriptions .ad-image-description {
                position: absolute;
            }
            #descriptions .ad-image-description .ad-description-title {
                display: block;
            }
        </style>
        <title>A demo of AD Gallery - Coffeescripter.com</title>
    </head>
    <body>
        <div id="container">
            <h1>AD Gallery, gallery plugin for jQuery</h1>
            <p>A highly customizable gallery plugin for jQuery.</p>
            <p>Read more here: <a href="http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/" target="_blank">http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/</a> | <a href="http://coffeescripter.com/code/">More code at Coffeescripter.com</a></p>

            <!--  Lay tat ca cac image path de add vao gallery           -->
            <div id="gallery" class="ad-gallery">
                <div class="ad-image-wrapper">
                </div>
                <div class="ad-controls">
                </div>
                <div class="ad-nav">
                    <div class="ad-thumbs">
                        <ul class="ad-thumb-list">
                            <li>
                                <a href="images/CategoryGallery/amply.png">
                                    <img src="images/CategoryGallery/thumb/amply.jpg" alt="" class="image0">
                                </a>
                            </li>
                            <li>
                                <a href="images/CategoryGallery/digitalpiano.png">
                                    <img src="images/CategoryGallery//thumbs/digitalpiano.jpg" title="A title for 10.jpg" alt="This is a nice, and incredibly descriptive, description of the image 10.jpg" class="image1">
                                </a>
                            </li>
                            <li>
                                <a href="images/11.jpg">
                                    <img src="images/thumbs/t11.jpg" title="A title for 11.jpg" longdesc="http://coffeescripter.com" alt="This is a nice, and incredibly descriptive, description of the image 11.jpg" class="image2">
                                </a>
                            </li>
                            <li>
                                <a href="images/12.jpg">
                                    <img src="images/thumbs/t12.jpg" title="A title for 12.jpg" alt="This is a nice, and incredibly descriptive, description of the image 12.jpg" class="image3">
                                </a>
                            </li>
                            <li>
                                <a href="images/13.jpg">
                                    <img src="images/thumbs/t13.jpg" title="A title for 13.jpg" alt="This is a nice, and incredibly descriptive, description of the image 13.jpg" class="image4">
                                </a>
                            </li>
                            <li>
                                <a href="images/14.jpg">
                                    <img src="images/thumbs/t14.jpg" title="A title for 14.jpg" alt="This is a nice, and incredibly descriptive, description of the image 14.jpg" class="image5">
                                </a>
                            </li>
                            <li>
                                <a href="images/2.jpg" id="t2">
                                    <img src="images/thumbs/t2.jpg" title="A title for 2.jpg" alt="This is a nice, and incredibly descriptive, description of the image 2.jpg" class="image6">
                                </a>
                            </li>
                            <li>
                                <a href="images/3.jpg">
                                    <img src="images/thumbs/t3.jpg" title="A title for 3.jpg" alt="This is a nice, and incredibly descriptive, description of the image 3.jpg" class="image7">
                                </a>
                            </li>
                            <li>
                                <a href="images/4.jpg">
                                    <img src="images/thumbs/t4.jpg" title="A title for 4.jpg" alt="This is a nice, and incredibly descriptive, description of the image 4.jpg" class="image8">
                                </a>
                            </li>
                            <li>
                                <a href="images/5.jpg">
                                    <img src="images/thumbs/t5.jpg" title="A title for 5.jpg" alt="This is a nice, and incredibly descriptive, description of the image 5.jpg" class="image9">
                                </a>
                            </li>
                            <li>
                                <a href="images/6.jpg">
                                    <img src="images/thumbs/t6.jpg" title="A title for 6.jpg" alt="This is a nice, and incredibly descriptive, description of the image 6.jpg" class="image10">
                                </a>
                            </li>
                            <!--<li>
                              <a href="images/7.jpg">
                                <img src="images/thumbs/t7.jpg" title="A title for 7.jpg" alt="This is a nice, and incredibly descriptive, description of the image 7.jpg" class="image11">
                              </a>
                            </li>
                            <li>
                              <a href="images/8.jpg">
                                <img src="images/thumbs/t8.jpg" title="A title for 8.jpg" alt="This is a nice, and incredibly descriptive, description of the image 8.jpg" class="image12">
                              </a>
                            </li>
                            <li>
                              <a href="images/9.jpg">
                                <img src="images/thumbs/t9.jpg" title="A title for 9.jpg" alt="This is a nice, and incredibly descriptive, description of the image 9.jpg" class="image13">
                              </a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </div>

            <div id="descriptions">

            </div>

            <p>Examples of how you can alter the behaviour on the fly;
                Effect: <select id="switch-effect">
                    <option value="slide-hori">Slide horizontal</option>
                    <option value="slide-vert">Slide vertical</option>
                    <option value="resize">Shrink/grow</option>
                    <option value="fade">Fade</option>
                    <option value="">None</option>
                </select><br>
                <a href="#" id="toggle-slideshow">Toggle slideshow</a> |
                <a href="#" id="toggle-description">Toggle having description outside of image</a> |
                <a href="#ad-image-t2" id="toggle-description">Jump to image by id</a> |
                <a href="#ad-image-3" id="toggle-description">Jump to image by index</a>
            </p>
        </div>
    </body>
</html>
